<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animate</title>
    <style>
        /*@keyframes grow {*/
        /*    from{*/
        /*        left: 0px;*/
        /*        font-size: 20px;*/
        /*    }*/
        /*    to{*/
        /*        left: 50%;*/
        /*        font-size: 45px;*/
        /*    }*/
        /*}*/
        @keyframes grow {
            0% {
                left: 0px;
                font-size: 20px;
            }
            50% {
                left: 50%;
                font-size: 45px;
            }
            100% {
                left: 0px;
                font-size: 20px;
            }
        }

        h1 {
            position: relative;
            animation-delay: 1s;
            animation-name: grow;
            animation-duration: 3s;
            animation-fill-mode: forwards;
            /*迭代次数*/
            animation-iteration-count: infinite;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const h1 = document.querySelector('h1');
            h1.style.animationPlayState = "paused";

            document.querySelector('button').onclick = () => {
                if (h1.style.animationPlayState === "paused") {
                    h1.style.animationPlayState = 'running';
                } else {
                    h1.style.animationPlayState = 'paused';
                }
            }
        })
    </script>
</head>
<body>
<button>CLick</button>
<h1>Wlcome!!!</h1>
</body>
</html>